<template>
  <div class="distributorSide-authorization-service-authorization">
    <!-- 搜索 -->
    <div class="header">
      <m-search
        ref="SearchForm"
        label-width="66px"
        :data="SEARCH_DATA"
        @searchForm="onSearch"
        @resetForm="onReset"
      />
    </div>
    <div class="header-botton">
      <el-button type="primary" @click="exportExcelButton"
        ><m-iconfont
          classify="m-pc-public"
          icon="m-pc-public_daocsj"
          size="14"
        /><span>导出数据</span></el-button
      >
      <el-button type="primary" @click="getDataList()"
        ><m-iconfont
          classify="m-pc-public"
          icon="m-pc-public_shuax1x"
          size="14"
        /><span>刷新数据</span></el-button
      >
    </div>
    <!-- 列表 -->
    <m-editable
      v-loading="table.tableLoading"
      :empty-type="table.resultType"
      :data="table.dataList"
      :columns="COLUMNS_TABLE"
      height="400"
      @selection-change="onHandleSelectionChange"
    >
      <template slot="default-action" slot-scope="scope">
        <el-button
          type="primary"
          plain
          size="mini"
          @click.stop="onDetails(scope.row)"
          >查看明细</el-button
        >
      </template>
    </m-editable>
    <!-- 分页模块 -->
    <div v-if="table.dataList.length > 0" class="footer">
      <el-pagination
        class="pageBox"
        align="right"
        :page-size="page.size"
        :current-page="page.curPage"
        :total="page.total"
        :layout="page.PAGINATION_LAYOUT"
        :page-sizes="page.PAGE_NUMBER"
        @size-change="onPageSizeChange"
        @current-change="onPageCurrentChange"
      />
    </div>
  </div>
</template>
<script>
import { PAGE_NUMBER, PAGINATION_LAYOUT } from '@const/common';
import {
  serviceImpowerPageList,
  serviceImpowerPageListExport,
} from '@api/guoke_deepexi_interface_center_v1';
import { formatDate } from '@const/filter';
import { $loadFileSimply } from '@const/loadFileOps'; // 下载文件的方法
import { fileDownload } from '@const/utils';
import * as CONSTS from './const';

export default {
  components: {},
  data() {
    return {
      ...CONSTS,
      auditStatus: 0,
      table: {
        searchData: {},
        tableLoading: false,
        resultType: 0,
        dataList: [
          {
            width: '40',
            fixed: 'left',
            type: 'selection',
          },
          {
            type: 'index',
            label: '序号',
            width: 56,
          },
        ],
        selectionChangeList: [],
      },
      page: {
        PAGE_NUMBER, // 页码数组
        PAGINATION_LAYOUT, // 页码功能布局
        curPage: 1,
        pageSize: PAGE_NUMBER[0],
        total: 0,
      },
      exportLoading: false,
    };
  },
  mounted() {
    this.getDataList();
  },
  methods: {
    // 获取数据
    getDataList() {
      this.table.tableLoading = true;
      this.$axios({
        url: serviceImpowerPageList,
        method: 'post',
        data: {
          page: this.page.curPage,
          pageSize: this.page.pageSize,
          ...this.table.searchData,
        },
      })
        .then((res) => {
          this.table.dataList = res.data.payload.content || [];
          this.page.total = res.data.payload.totalElements;
        })
        .finally(() => {
          this.table.tableLoading = false;
        });
    },
    // 导出
    exportExcelButton() {
      this.exportLoading = true;
      const timeStr = formatDate(new Date(), 'YYYYMMDD-HH:mm:ss');
      const filename = `查询导出${timeStr}.xls`;
      const data = {
        page: this.page.curPage,
        pageSize: this.page.pageSize,
        ...this.table.searchData,
      };
      const reqData = {
        url: serviceImpowerPageListExport,
        data,
        method: 'post',
        timeout: 300000,
      };
      $loadFileSimply(reqData)
        .then((res) => {
          // 文件流
          fileDownload(res, filename);
        })
        .finally(() => {
          this.exportLoading = false;
        });
    },
    // 详情
    onDetails(scope) {
      this.$router.push({
        path: 'service-authorization/details',
        query: { id: scope.id },
      });
    },
    // 勾选的数据
    onHandleSelectionChange(val) {
      this.table.selectionChangeList = val;
    },
    // 搜索
    onSearch(condition) {
      this.page.curPage = 1;
      this.table.searchData = condition;
      this.getDataList();
    },
    // 重置
    onReset(condition) {
      this.page.curPage = 1;
      this.table.searchData = condition;
      this.getDataList();
    },
    // 点击每页条数事件
    onPageSizeChange(size) {
      this.page.pageSize = size;
      this.getDataList();
    },
    // 切换页码事件
    onPageCurrentChange(curPage) {
      this.page.curPage = curPage;
      this.getDataList();
    },
  },
};
</script>
<style lang="less">
.distributorSide-authorization-service-authorization {
  margin: 0 20px 10px 20px !important;
  display: flex;
  flex-direction: column;
  .header-botton {
    display: flex;
    justify-content: flex-end;
    align-items: center;
    padding: 0 0 10px 0px;
  }
  .footer {
    padding: 7px 26px 6px 0;
    border: 1px solid @cutOffRuleColor;
    border-top: none;
    border-radius: 0 0 3px 3px;
  }
}
</style>
